.homePageHeaderMenuComponent {
    width: 100%;
    height: 64px;
    background-color: rgba(9, 13, 15, .9);
    box-shadow: 0px 1px 0px 0px rgba(23, 161, 230, 0.5);
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 1;

    .homePageHeaderMenuComponent-left {
        display: flex;

        .homePageHeaderMenuComponent-left__headerMenuComponentTitleComponent {
            .left-headerMenuComponentTitleComponent__titleBox {
                height: 64px;
                background-image: linear-gradient(180deg,
                        rgba(9, 13, 15, 0.3) 0%,
                        rgba(23, 161, 230, 0.3) 100%);
                transform: skewX(-20deg);
                position: relative;
                left: -12px;
                padding: 0 26px 0 30px;

                .headerMenuComponentTitleComponent-titleBox__label {
                    font-weight: 600;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 64px;
                    text-align: center;
                    transform: skewX(20deg);
                }
            }

            .left-headerMenuComponentTitleComponent__slash {
                height: 64px;
                border-right: 1px solid;
                border-image: linear-gradient(180deg, rgba(23, 161, 230, 0.1), #17a1e6, rgba(23, 161, 230, 0.1)) 1 1;
                transform: rotate(20deg);
                position: relative;
                left: -3px;
                top: -115px;
            }
        }

        .homePageHeaderMenuComponent-left__headerMenuComponentTabComponent {
            display: flex;

            .left-headerMenuComponentTabComponent__tabItem {
                margin: 0 10px;
                padding-top: 15px;
                display: flex;
                white-space: nowrap;
                cursor: pointer;

                .headerMenuComponentTabComponent-tabItem__content {
                    text-align: center;

                    .tabItem-content__label {
                        font-size: 16px;
                    }

                    .tabItem-content____img {
                        width: 20px;
                        height: 16px;
                        margin-top: 5px;
                    }
                }

                .headerMenuComponentTabComponent-tabItem__slash {
                    height: 35px;
                    border-left: 1px solid;
                    border-image: linear-gradient(180deg,
                            rgba(23, 161, 230, 0.1),
                            rgba(23, 161, 230, 1),
                            rgba(23, 161, 230, 0.1)) 1 1;

                    transform: rotate(20deg);
                    margin-left: 24px;
                    position: relative;
                    top: -5px;
                }
            }
        }
    }

    .homePageHeaderMenuComponent-right {
        display: flex;
        align-items: center;

        .homePageHeaderMenuComponent-right__headerMenuComponentDateCompoent {
            width: 106px;
            height: 42px;
            background-image: url("../../../../assets/image/时间背景框@2x.png");
            background-size: 100% 100%;
            text-align: center;
            padding-top: 2px;

            .right-headerMenuComponentDateCompoent__date {
                color: #7a8f99;
                font-size: 12px;
                white-space: nowrap;
            }

            .right-headerMenuComponentDateCompoent__time {
                color: #ffffff;
                font-size: 18px;
                position: relative;
                top: -3px;
            }
        }

        .homePageHeaderMenuComponent-right__headerMenuComponentUserInfoCompoent {
            padding: 0 32px 0 31px;

            .right-headerMenuComponentUserInfoCompoent__content {
                display: flex;
                align-items: center;
                cursor: pointer;

                .headerMenuComponentUserInfoCompoent-content__image {
                    width: 36px;
                    height: 36px;
                }

                .headerMenuComponentUserInfoCompoent-content__username {
                    font-size: 14px;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin-left: 10px;

                }
            }
        }
    }
}



.right-headerMenuComponentUserInfoCompoent__popover {
    .right-popover__dropdown {
        .popover-dropdown__option {
            padding: 21px 22px;
            font-size: 14px;
            font-weight: 400;
            color: #B8D6E6;
            cursor: pointer;
        }

        .popover-dropdown__divide {
            border-bottom: 1px solid rgba(23, 161, 230, 0.3);
        }
    }

    :global {

        [class^="ant-popover"],
        [class*=" ant-popover"] {
            // 气泡框内容的位置
            .ant-popover-inner {
                padding: 0;
                border: 1px solid rgba(23, 161, 230, 0.3);
                white-space: nowrap;
                border-radius: 2px;
                position: relative;
                left: -25px;
            }

            // 气泡框内容和箭头的背景色
            .ant-popover-inner,
            .ant-popover-arrow:before {
                background-color: rgba(13, 89, 128, 0.9);
            }

            // 气泡框尖角
            .ant-popover-arrow {
                left: 10px;
                top: 1px;
            }

            // 气泡框尖角边框
            .ant-popover-arrow::after {
                border: 1px solid rgba(23, 161, 230, 0.3);
            }
        }
    }
}